<template>
    <div>
        <el-table :data="props.list" style="width: 100%" size="large" border :fit="true" row-class-name="row_name"  :header-cell-style="{
            textAlign: 'center',
            height: '42px',
			background: '#e9f2fa',
        }">
            <el-table-column fixed prop="title" label="打赏类型" align="center" />
            <el-table-column prop="num" label="打赏金额" align="center" />
            <el-table-column prop="msg" label="打赏说明" align="center" />
            <el-table-column label="状态" align="center">
                <template #default="scope">
                    <el-switch v-model="scope.row.status" size="large" @change="change(scope.row.id,scope.row.status)" :inactive-value="2" :active-value="1"/>
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" align="center">
                <template #default="scope">
                    <el-button  type="primary" size="default" @click="openRow(scope.row)">
                        编辑
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <div>
            <client-only>
                <el-dialog custom-class="order-dialog" v-model="dialogVisible" width="550px" :destroy-on-close="true" center >
                    <div class="pay_editing">
                        <h3>{{ pay_type }} 支付编辑</h3>
                        <div class="item first_item">
                            <span class="left">金额</span>
                            <div class="content">
                                <el-input v-model="amount" placeholder="输入金额" size="large" />
                            </div>
                            <span class="right_yuan">元</span>
                        </div>
                        <div class="item">
                            <span class="left">说明</span>
                            <div class="textarea">
                                <el-input v-model="illustrate" :rows="5" type="textarea" resize="none" placeholder="输入说明"/>
                            </div>
                        </div>
                        <div class="item">
                            <span class="left">服务内容</span>
                            <p>{{ serviceContent }}</p>
                        </div>
                        <div class="submit_button">
                            <el-button type="warning" size="large" @click="closeDialogVisible">取消</el-button>
                            <el-button type="primary" size="large" @click="save_data">保存</el-button>
                        </div>
                    </div>
                </el-dialog>
            </client-only>
        </div>
    </div>
</template>
  
<script lang="ts" setup>
import { reactive, ref } from 'vue'
import {defineProps} from "vue"
import {change_pay_list,change_pay_staus} from "@/request/api/information.ts"
const props = defineProps(["list"])
function openRow(item:any) {
    console.log(item, "item");
    id.value = item.id
    pay_type.value = item.title
    serviceContent.value = item.msg
    dialogVisible.value = true
}
let dialogVisible = ref(false)
function closeDialogVisible() {
    dialogVisible.value = false
    amount.value = ""
    illustrate.value = ""
}
// id
let id = ref("")
// 弹框类型
let pay_type = ref("")
// 金额
let amount = ref("")
// 说明
let illustrate = ref('')
// 服务内容
let serviceContent = ref('')
// 保存
async function save_data(){
    if(!amount.value){
        ElMessage.error('请输入金额')
        return
    }
    if(!illustrate.value){
        ElMessage.error('请输入说明')
        return
    }
    // 请求
  let data = await change_pay_list({
    id : id.value,
    num : amount.value,
    msg : illustrate.value
  })  
  console.log(data,"illustrateillustrate");
  if(data.code == 200){
    location.reload()
  }
}
const change = async(id :number,val:any)=>{
    console.log(val,"val",id);
   let {data} = await change_pay_staus({id:id,status:val})
   console.log(data,"data");
   
}
</script>
<style lang="scss" scoped>
:deep(.cell){
    color:#5e6d82 ;
    font-size: 13px;
}
:deep(thead){
    .cell{
        color:#1f2f3d ;
        font-size: 14px;
        font-weight: 650;
    }
}	
:deep(.el-dialog__header) {
    display: none;
}

:deep(.el-dialog__body) {
    //   padding: 60px 100px;
    //   background: #FFFFFF;
    //   box-shadow: 0px 2px 40px 0px rgba(0,0,0,0.1);
    padding: 0;
    height: 400px;
}

:deep(.el-dialog) {
    margin-top: 180px;
    overflow: hidden;
    border-radius: 5px;
}

:deep(.el-overlay) {
    background: rgb(0, 0, 0, 0.7) !important;
}

.pay_editing {
    border-radius: 5px;
    overflow: hidden;
    h3 {
        height: 50px;
        background-color: rgba(242, 242, 242, 1);
        @include font(#333333, 15, 50);
        font-weight: 500;
        padding-left: 15px;
    }

    .item {
        padding: 0 20px;
        display: flex;
        align-items: normal;
        margin-top: 20px;
        .left{
            font-size: 16px;
            color: #333;
            width: 64px;
            display: block;
            margin-right: 10px;
        }
        p{
            font-size: 16px;
            color: #333;
        }
        .content{
            width: 275px;
        }
        .right_yuan{
            height: 40px;
            display: block;
            width: 60px;
            border: 1.5px solid rgba(228, 228, 228, 1);
            border-left: none;
            border-radius : 0 5px 5px 0;
            box-sizing: border-box;
            text-align: center;
            font-size: 16px;
            color: #333;
            line-height: 40px;
        }
        .textarea{
            flex: 1;
        }
    }

    .first_item {
        align-items: center;
    }
    .submit_button{
        margin-top: 40px;
        border-top: 1px solid rgba(215, 215, 215, 1);
        padding-top: 20px;
        text-align: center;
        button{
            width: 140px;
        }
    }
}
:deep(.el-input__wrapper){
    border-radius: 5px 0 0 5px;
}
:deep(.el-input__wrapper.is-focus){
    box-shadow: 0 0 0 1px var(--el-input-border-color,var(--el-border-color)) inset;;
    box-sizing: border-box;
}
:deep(.row_name){
   height: 42px !important;
}
:deep(.el-table__cell){
    padding: 0;
}
</style>
  